<template>
  <el-form :model="model"
           ref="queryForm"
           size="small"
           label-width="140px">
    <el-row v-for="(group, index) in chunkedSchema" :key="index">
      <el-col v-for="item in group" :key="item.prop" :span="8">
        <el-form-item :label="item.label" :prop="item.prop">
          <template v-if="item.component === 'input'">
            <el-input
              v-model="model[item.prop]"
              :placeholder="item.componentProps.placeholder || `请输入${item.label}`"
              :clearable="item.componentProps.clearable === undefined ? true : item.componentProps.clearable"
              @keyup.enter.native="handleEnter"
            />
          </template>
          <template v-if="item.component === 'select'">
            <el-select v-model="model[item.prop]" placeholder="请选择" clearable class="am-w-full">
              <el-option
                v-for="item in item.componentProps.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </template>
          <template v-if="item.component === 'dateSelect'">
            <el-date-picker clearable
                            v-model="model[item.prop]"
                            :type="item.componentProps.type || 'date'"
                            :value-format="item.componentProps.valueFormat || 'yyyy-MM-dd'"
                            :placeholder="`请选择${item.label}`"
                            class="am-w-full"/>
          </template>
          <AmFolderTreeSelector v-if="item.component === 'AmFolderTreeSelector'" v-model="model[item.prop]" />
          <AmGroupSelector v-if="item.component === 'AmGroupSelector'" v-model="model[item.prop]" />
          <RoleSelector v-if="item.component === 'RoleSelector'" v-model="model[item.prop]" />
          <AmCabinetTreeSelector v-if="item.component === 'AmCabinetTreeSelector'" v-model="model[item.prop]" />

        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini"
                 @click="handleEnter">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini"
                 @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import AmFolderTreeSelector from "../../views/am/amFolder/AmFolderTreeSelector.vue";
import {chunk} from "lodash";
import AmCabinetTreeSelector from "../../views/am/amCabinet/AmCabinetTreeSelector.vue";
import AmGroupSelector from "../../views/am/amGroup/AmGroupSelector.vue";
import RoleSelector from "../../views/am/authRole/RoleSelector.vue";

export default {
  components: {AmGroupSelector, AmCabinetTreeSelector, AmFolderTreeSelector, RoleSelector},
  props: {
    statistics: Boolean,
    schema: Array,
  },
  data() {
    return {
      model: {},
    }
  },
  computed: {
    chunkedSchema() {
      return chunk(this.schema, 3)
    }
  },
  methods: {
    handleEnter() {
      this.$emit('query', this.model)
    },
    handleReset() {
      Object.keys(this.model).forEach(key => {
        this.model[key] = null;
      })
      if(!statistics) {
        this.$emit('query', this.model)
      }
    },
    getParams() {
      return this.model;
    }
  },
  created() {
    this.schema.forEach(item => {
      this.$set(this.model, item.prop, null)
    })
  }
}
</script>
